<template>
  <div id="mainCon">
    <!-- 用户信息 S -->
    <van-row id="user-head">
      <div id="user-box">
        <van-col span="6" class="userphoto-con">
          <img :src="userphoto" alt>
        </van-col>
        <van-col span="18" class="user-info">
          <p class="nickname">微微思量</p>
          <p class="username">用户名：sjw975263547</p>
          <div id="plus-tip">
            <p class="text">升级10大特权</p>
          </div>
        </van-col>
      </div>
    </van-row>
    <!-- 用户信息 E -->
    <!--订单导航  S -->
    <div class="user-group">
      <van-row class="orderNav">
        <van-col span="6">
          <div class="navbar">
            <img :src="unpay" alt class="icon">
            <span class="text">代付款</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="navbar">
            <img :src="unrecieve" alt class="icon">
            <span class="text">代收获</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="navbar">
            <img :src="consult" alt class="icon">
            <span class="text">退还/售后</span>
          </div>
        </van-col>
        <van-col span="6">
          <div class="navbar">
            <img :src="orders" alt class="icon">
            <span class="text">全部订单</span>
          </div>
        </van-col>
      </van-row>
      <van-row id="recieve-box">
        <van-col span="4">
          <div class="user-logistics">
            <img :src="pro" alt class="pro">
            <p class="text">共1件</p>
          </div>
        </van-col>
        <van-col span="20">
          <div class="user-logistics-info">
            <span class="proNewtype">配送中</span>
            <span class="proTime">2019-01-04 18:17:31</span>
          </div>
          <div
            class="proText"
          >[南京市]快件已在[南京雨花区]签收，签收人：菜鸟，如有疑问请电联：18168070521/025-86772098、025-86772099，您的快递已经妥投，如果您对我们的服务感到满意，请给个五星好评，鼓励一下我们【请在评价快递员处帮忙点亮五颗星星哦~】</div>
        </van-col>
      </van-row>
    </div>
    <!--  订单导航E -->
    <!--订单导航  S -->
    <div class="user-group">
      <van-row class="orderNav">
        <van-col span="8">
          <div class="navbar">
            <span class="num">1</span>
            <span class="text">商品收藏</span>
          </div>
        </van-col>
        <van-col span="8">
          <div class="navbar">
            <span class="num">3</span>
            <span class="text">店铺收藏</span>
          </div>
        </van-col>
        <van-col span="8">
          <div class="navbar">
            <span class="num">4</span>
            <span class="text">我的足迹</span>
          </div>
        </van-col>
      </van-row>
    </div>
    <!--  订单导航E -->
    <!-- 标签导航 S -->
    <div class="navbar-box">
      <span class="text lf">客户服务</span>
      <span class="icon rt">
        <van-icon name="arrow"/>
      </span>
    </div>
    <!-- 标签导航 E -->
    <!-- 推荐S -->
    <div id="recommend">
      <div class="recommend-tit">
        <span class="text">为您推荐</span>
      </div>
      <ul class="recommend-box">
        <li class="lis">
          <div class="cover">
            <img
              class="pro-img"
              src="https://img14.360buyimg.com/n7/jfs/t1/26380/25/3948/138736/5c2ce397E10f719ba/d5ce2bea7d07a990.jpg!q70.dpg"
            >
          </div>
          <div class="info">
            <div class="name">NewBalanceNB 男鞋MRL247WB复古鞋休闲运动鞋跑步鞋耐磨舒适时尚 MRL247WB/白色 37.5</div>
            <div class="price-info">
              <div class="price">
                ￥
                <em>299</em>
              </div>
              <div class="mod_sign_tip">劵</div>
            </div>
          </div>
        </li>
        <li class="lis">
          <div class="cover">
            <img
              class="pro-img"
              src="https://img14.360buyimg.com/n7/jfs/t1/20748/39/3948/166432/5c2ce83bEa7b1ffec/6bb586ee5a8c0fe5.jpg!q70.dpg"
            >
          </div>
          <div class="info">
            <div class="name">NewBalanceNB 男鞋MRL247WB复古鞋休闲运动鞋跑步鞋耐磨舒适时尚 MRL247WB/白色 37.5</div>
            <div class="price-info">
              <div class="price">
                ￥
                <em>299</em>
              </div>
              <div class="mod_sign_tip">劵</div>
            </div>
          </div>
        </li>
        <li class="lis">
          <div class="cover">
            <img
              class="pro-img"
              src="https://img14.360buyimg.com/n7/jfs/t1/26380/25/3948/138736/5c2ce397E10f719ba/d5ce2bea7d07a990.jpg!q70.dpg"
            >
          </div>
          <div class="info">
            <div class="name">NewBalanceNB 男鞋MRL247WB复古鞋休闲运动鞋跑步鞋耐磨舒适时尚 MRL247WB/白色 37.5</div>
            <div class="price-info">
              <div class="price">
                ￥
                <em>299</em>
              </div>
              <div class="mod_sign_tip">劵</div>
            </div>
          </div>
        </li>
        <li class="lis">
          <div class="cover">
            <img
              class="pro-img"
              src="https://img14.360buyimg.com/n7/jfs/t1/20748/39/3948/166432/5c2ce83bEa7b1ffec/6bb586ee5a8c0fe5.jpg!q70.dpg"
            >
          </div>
          <div class="info">
            <div class="name">NewBalanceNB 男鞋MRL247WB复古鞋休闲运动鞋跑步鞋耐磨舒适时尚 MRL247WB/白色 37.5</div>
            <div class="price-info">
              <div class="price">
                ￥
                <em>299</em>
              </div>
              <div class="mod_sign_tip">劵</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 推荐E -->
  </div>
</template>
<script>
import userphoto from "@/assets/images/userphoto.png";
import vip from "@/assets/images/vip.png";
import unpay from "@/assets/images/unpay.png";
import pro from "@/assets/images/pro.jpg";
import consult from "@/assets/images/consult.png";
import unrecieve from "@/assets/images/unrecieve.png";
import orders from "@/assets/images/orders.png";

export default {
  data() {
    return {
      userphoto: userphoto,
      vip: vip,
      unpay: unpay,
      pro: pro,
      consult: consult,
      unrecieve: unrecieve,
      orders: orders
    };
  },
  methods: {
    onClickLeft() {
      this.$toast("返回");
    },
    onClickRight() {
      this.$toast("按钮");
    }
  }
};
</script>
<style  scoped>
#user-head {
  padding: 10px 8px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#user-box {
  padding: 18px 12px;
  background: #ffffff;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(228, 57, 60, 0.4);
  background: -webkit-linear-gradient(left, #eb3c3c, #ff7459);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#eb3c3c),
    to(#ff7459)
  );
  background: linear-gradient(90deg, #eb3c3c, #ff7459);
}
.userphoto-con {
  width: 60px;
  height: 60px;
}
.userphoto-con img {
  width: 100%;
  display: block;
}
.user-info {
  color: #fff;
  line-height: 24px;
  padding-left: 12px;
  position: relative;
  text-align: left;
}
.nickname {
}
.username {
  color: hsla(0, 0%, 100%, 0.7);
}
#plus-tip {
  /* background: url(…cPy397S1PZqgiuPYlFBfVbvO+wPlK1L4OVhp9utULfdvwXb8J2AjCsQFkAAAAASUVORK5CYII=) no-repeat center/100% 100%; */
  position: absolute;
  right: -20%;
  bottom: -35px;
  padding: 16px 24px;
  -webkit-transform: rotate(11deg);
  transform: rotate(11deg);
  box-shadow: -0.05rem -0.05rem 0.3rem #c6934d;
  border-top-left-radius: 0.2rem;
  background: url(https://img11.360buyimg.com/jdphoto/s100x18_jfs/t20647/287/1260001649/632/de55fa7f/5b235f3cNbe6fe972.png)
    8px 4px/50px 10px no-repeat #333;
}
#plus-tip .text {
  position: relative;
  margin-top: 5px;
  padding: 2px 4px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  color: #cead68;
  border-radius: 0.6rem;
  background-color: hsla(0, 0%, 85.1%, 0.1);
}

.user-group {
  margin: 15px 0;
  background: #fff;
  padding: 0 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.orderNav {
  padding: 10px 0;
}
.orderNav .navbar {
  text-align: center;
}
.orderNav .icon {
  display: block;
  margin: 0 auto;
  width: 28px;
}
.orderNav .text {
  font-size: 12px;
  margin: 8px 0 0;
  display: block;
  width: 100%;
}
.orderNav .num {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  position: relative;
}
#recieve-box {
  border-top: 1px solid #eeeeee;
  padding-top: 15px;
  padding-bottom: 10px;
}
.user-logistics {
  overflow: hidden;
  width: 55px;
  height: 55px;
  position: relative;
}
.user-logistics .pro {
  display: block;
  width: 100%;
}
.user-logistics .text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 0;
}
.user-logistics-info {
  text-align: left;
  margin-bottom: 10px;
  padding-left: 10px;
}
.user-logistics-info .proTime {
  display: inline-block;
  vertical-align: sub;
  font-size: 14px;
  color: #999999;
}
.user-logistics-info .proNewtype {
  font-size: 14px;
  color: #ea3b3d;
  padding-right: 8px;
  line-height: 20px;
  vertical-align: middle;
  display: inline-block;
}
.proText {
  padding-left: 10px;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #999999;
}
.navbar-box {
  background: #fff;
  line-height: 46px;
  padding: 0 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

#recommend {
}
.recommend-tit {
  border-bottom: 1px solid #e4e4e4;
  line-height: 28px;
  height: 14px;
  margin: 15px 15px 25px;
}
.recommend-tit .text {
  display: inline-block;
  background: #f7f7f7;
  padding: 0 20px;
  font-size: 12px;
  color: #999999;
  position: relative;
}
.recommend-tit .text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.recommend-tit .text::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -2px;
  width: 4px;
  height: 4px;
  background-color: #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.recommend-box {
  overflow: hidden;
  background: #fff;
}
.recommend-box .lis {
  float: left;
  width: 50%;
  border-bottom: 1px solid #f7f7f7;
  padding: 15px 15px 0 15px;
  box-sizing: border-box;
  overflow: hidden;
}
.recommend-box .lis:nth-child(2n-1) {
  width: 50%;
  border-right: 1px solid #f7f7f7;
}
.recommend-box .cover {
  width: 100%;
}
.recommend-box .pro-img {
  display: block;
  width: 100%;
}
.recommend-box .info {
  margin: 12px 0 4px;
  text-align: left;
}
.recommend-box .name {
  margin: 12px 0 4px;
  font-size: 12px;
  color: #333;
  line-height: 18px;
  height: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.recommend-box .price-info {
  display: flex;
  color: #e93b3d;
}
.recommend-box .price {
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
}
.recommend-box .price em {
  font-size: 16px;
}
.recommend-box .mod_sign_tip {
  display: inline-block;
  position: relative;
  border-radius: 2px;
  min-width: 16px;
  font-size: 10px;
  line-height: 15px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #e4393c;
  height: 16px;
  margin: 4px 10px;
}
</style>

